<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>使用jQuery实现图片切换</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style>
    body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em '微软雅黑';
    }

    h1 {
        color: green;
    }

    #slide {
        height: 300px;
        width: 960px;
    }

    #slide div {
        position: absolute;
        z-index: 0;
    }

    #slide div.previous {
        z-index: 1;
    }

    #slide div.current {
        z-index: 2;
    }
    </style>
</head>

<body>
    <h1>使用jQuery实现图片切换</h1>
    <p>
        原理：使用setIntervel()方法每隔一段时间，改变图片的z-index属性，从而实现图片的轮播。
    </p>
    <div id="slide">
        <div class="current"><img src="images/Paris.jpg"></div>
        <div><img src="images/Paris-2.jpg"></div>
        <div><img src="images/Hong-Kong.jpg"></div>
        <div><img src="images/Hong-Kong-2.jpg"></div>
        <div><img src="images/London.jpg"></div>
        <div><img src="images/London-2.jpg"></div>
        <div><img src="images/San-Francisco.jpg"></div>
        <div><img src="images/San-Francisco-2.jpg"></div>
    </div>
    <script>
    $(function() {
        setInterval(rotateImages, 3000);
    });

    function rotateImages() {
        var oCurPhoto = $('#slide div.current');
        var oNxtPhoto = oCurPhoto.next();
        if (oNxtPhoto.length == 0)
            oNxtPhoto = $('#slide div:first');

        oCurPhoto.removeClass('current').addClass('previous');
        oNxtPhoto.css({
                opacity: 0.0
            }).addClass('current')
            .animate({
                    opacity: 1.0
                }, 1000,
                function() {
                    oCurPhoto.removeClass('previous');
                });
    };
    </script>
</body>

</html>
